import CodeSandboxEmbed from "./jsx/utils/CodeSandboxEmbed.js";
import { MoveCamera, FollowObject, FollowObjectOrientation } from "./jsx/allLiveEditors";

# Managing the Camera

In this chapter, you'll learn how to:

- Control camera position and other state
- Update the camera to follow object movements

## Moving the Camera

The WebGL camera uses a [perspective projection](https://webglfundamentals.org/webgl/lessons/webgl-3d-perspective.html) to mimic the way a human eye sees. Worldview has a simple `cameraState` API that abstracts away much of the math needed to control the camera. Read the [Camera docs](#/docs/api/camera) and explore the playground to learn more.

In this step, we'll add a duck model to the center of the scene, and move the camera to observe the duck from different angles.

First, let's add a duck to the scene using [GLTFScene](#/docs/commands/gltfscene), and add the `Duck.glb` model file to the `src/utils` folder.

```js
import duckModel from "common/fixtures/Duck.glb"; // Webpack magic: we actually import a URL pointing to a .glb file

// ... other existing code
<GLTFScene model={duckModel}>
  {{
    pose: {
      position: { x: 0, y: 0, z: 0 },
      orientation: { x: 0, y: 0, z: 0, w: 1 },
    },
    scale: { x: 3, y: 3, z: 3 },
  }}
</GLTFScene>;
```

To move the camera, we'll use a handy [useAnimationFrame](https://github.com/cruise-automation/webviz/tree/master/packages/%40cruise-automation/hooks) hook that accepts a callback which will be called at each browser repaint. In our case, whenever the callback is called, we'll increase a `count` state by 1, and use the `count` state to adjust the camera's `phi` and `thetaOffset`.

<MoveCamera />

Now the camera is moving around the scene, giving us a 360° view of the duck model!

Notice that we've added `cameraState={cameraState}`, which turns Worldview into a [controlled component](https://reactjs.org/docs/forms.html). Controlled components usually require an `onChange` handler, but no `onCameraStateChange` prop is needed for our example, since we don't need to do anything with the new `cameraState` value.

## Following an Object

In this step, let's move the duck along our knot, and move the camera to follow the duck around as it travels.

First, let's remove the camera setting for `thetaOffset` and `phi`, so that we don't get dizzy watching the scene while the duck moves. We can derive the duck's position from the spheres over time, and use the duck position as `target` input for `cameraState`.

<FollowObject />

Voilà! By adding the `target` position to `cameraState`, the camera now follows the duck around!

## Bonus Point: Following the Object Orientation

The duck is moving, but not very realistically: it doesn't lean forward or backward when it goes up or down the knob curves. In this step, we'll refine the following behavior by computing the duck's orientation based on it's location on the knot, and use it as `targetOrientation` input for `cameraState`.

<FollowObjectOrientation />

Next, let's [make our scene interactive](#/docs/tutorial/adding-interactivity) by handling mouse events.
